<template>
    <div>
        <nav class="navbar navbar-inverse nav-diy all">
    <!-- logo -->
    <div class="navbar-header" id="logo">
      <ul>
        <li><img src="../assets/home_img/logo.png" alt=""></li>
        <li id="character">
          <a class="disabled" href="#">不挂</a>
          <a class="disabled" href="#">work together</a>
        </li>
      </ul>
    </div>
    <!-- 导航标签 -->
    <div class="container-fluid container-diy">
      <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">

        <ul class="nav navbar-nav" id="navbar">
          <router-link to="/" class="a">首页</router-link>
          <router-link to="/answer" class="a">问答</router-link>
          <router-link to="/original" class="a">原创</router-link>
          <router-link to="/community" class="a">圈子</router-link>
          <router-link to="/leisure" class="a">休闲</router-link>
          <router-link to="/callUs" class="a">联系我们</router-link>
        </ul>

      </div>

    </div>
    <!-- 登录注册 -->
    <ul class="nav navbar-nav navbar-right" id="log_reg">
      <li><a class="glyphicon glyphicon-envelope" href="#"></a></li>
      <router-link to="/login" class="a">登录</router-link>
      <li><a class="disabled">|</a></li>
      <router-link to="/register" class="a">注册</router-link>
      <li><a class="disabled">|</a></li>
      <li><a href="#" class="glyphicon glyphicon-search"></a></li>
    </ul>
  </nav>
    </div>
</template>


<script>
export default {
    
}
</script>


<style scoped>
    @import url("../utils/bootstrap/css/bootstrap.min.css");
.all {
    width: 1366px;
    margin: 0 auto;
}
a {
    text-decoration: none !important;
}
li {
    list-style: none;
}
.nav-diy {
    position: relative;
    background-color: #0d0d0d;
    border-radius: 0;
    height: 128px;
}
#logo {
    position: absolute;
    width: 200px;
    height: 77px;
    top: 27px;
    left: 111px;
}
#logo ul li {
    float: left;
}

/* 这是关于图标 */
#character a:first-child {
    display: block;
    position: absolute;
    font-size: 36px;
    color: #ffffff;
    font-family: 'AdobeHeitiStd-Regular';
    left: 93px;
    top: 5px;
}
#character a:last-child {
    display: block;
    position: absolute;
    font-size: 18px;
    color: #ffffff;
    font-family: 'MVBoli';
    font-style: italic;
    left: 79px;
    top: 55px;
}
.disabled {
    pointer-events: none;
    cursor: default;
    /* opacity: 0.6; */
}

/* 导航标签 */
.container-diy {
    position: absolute;
    top: 39px;
    width: 500px;
    left: 345px;
}
.navbar-collapse{
    width: 500px;
}
#bs-example-navbar-collapse-1 {
    position: relative;
    
}
#navbar .a{
    color: #ffffff;
    padding: 0 12px;
    font-size: 20px;
}
#navbar .a:hover {
    color: #58914e;
}
#navbar .a:focus {
    color: #58914e;
}
#navbar li a{
    padding-right: 18px;
    font-size: 18px;
    color: #ffffff;
}
/* 这里是登录 */
#log_reg {
    position: absolute;
    top: 10px;
    right: 100px;
    font-size: 14px;
    font-family: 'MicrosoftYaHeiUI'; 
}
#log_reg .a{
    color: #ffffff;
    padding: 0 4px;
}
#log_reg li a{
    color: #ffffff;
    padding: 0 4px;
}
</style>